<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box{
				width:200px;
				height:200px;
				border:1px red solid;
				font-size:32px;	/* 字体大小 */
				text-align:center;
				/* float:left(左浮动,从左往右排)/right(右浮动)/none(没有,默认值,不浮动) */
				float:right;	
			}
			.box2{
				width:800px;
				height:210px;
				border:1px solid black;
			}
			/*解决方法1. .clear{
				clear:both;} 清除两端浮动 */
			.bigbox{
				/* overflow:hidden;*/ /* 超出部分隐藏 */ 
			}
			/* 清除浮动的第三种方式: 添加*/
			.clearfix::after{	/* 在clearfix类的后面 */
				content:"";		/* 内容为空 */
				display:block;	/* 将伪元素转换为块级盒子 */
				height:0;		/* 高度设置为0 */
				clear:both;		/* 清除两端浮动 */
				visibility:hidden;	/* 显示状态：隐藏 */
			}
			/* 清除浮动的第四种方式: 添加*/
			.clearfix::after,.clearfix::before{		/* 在clearfix类的后面 */
				content:"";
				display:table;
			}
			.clearfix::after{
				clear:both;	
			}
		</style>
	</head>
	<body>
		<!-- 
		网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
		标准流+浮动布局策略：父级用标准流排列上下位置，内部子元素用浮动排列左右位置！
		 -->
		<!-- 传统的网页布局：标准流+浮动+定位 -->
		<!-- 浮动：float -->
		<!-- 快速创建标签：p*3>Tab -->
		<!-- 快速创建类名为box的盒子：标签.box*个数>tab -->
		<!-- 
		浮动的特性;
		  1.浮动的元素会脱离标准流（脱标）；解决方法：清除浮动。
		  2.浮动的元素一行内显示并且顶部对齐；
		  3.浮动的元素具有行内块元素类似的特性。
		清除浮动的方法：
		  1.额外标签法：隔墙法。即给浮动的盒子后添加一个额外的块级标签，
					   并给标签加入clear:both;（清除浮动）。此方法不常用。
		  2.给父级元素添加overflow:hidden;属性。
		  3.
		-->
		<div class="bigbox clearfix">
			<div class="box">1</div>
			<div class="box" style="height:180px;">2</div>
			<div class="box" style="height:240px;">3</div>
			<!-- 解决方法1.<div class="clear"></div> -->
		</div>
		
		<div class="box2"></div>
	</body>
</html>
